<template>
  <div class="flowingWater">
    <el-form   :model="searchData" class="searchForm">
      <el-form-item>
        <el-input class="seech" v-model="searchData.orderId" placeholder="订单号"></el-input>
      </el-form-item>


      <el-form-item>
        <el-select class="seech" v-model="searchData.capitalDirection" placeholder="资金方向">
          <el-option label="入账" :value="0"></el-option>
          <el-option label="出账" :value="1"></el-option>
          <el-option label="不限" :value="null"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select class="seech" v-model="searchData.tradeType" placeholder="交易类型">
          <el-option label="有" :value="1"></el-option>
          <el-option label="无" :value="0"></el-option>
          <el-option label="不限" :value="null"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item style="width: 420px;">
        <el-date-picker :unlink-panels="true" v-model="searchData.date" @change="getDate" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"  end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item style="width: 60px;">
        <el-button type="primary" @click="searchTableDate" >搜索</el-button>
      </el-form-item>
    </el-form>

    <div class="contentTop">
      <div class="balance"> 账户余额： <span class="money">￥{{balance}}</span> 元</div>
      <div class="btn" @click="dialogVisible = true">充值</div>
    </div>
    
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="orderId" label="订单号" align="center">
      </el-table-column>
      <el-table-column prop="tradeTime" label="交易时间" align="center">
      </el-table-column>
      <el-table-column prop="userId" label="用户编号" align="center">
      </el-table-column>
      <el-table-column prop="accountNo" label="第三方支付账户编号" align="center">
      </el-table-column>
      <el-table-column prop="amount" label="金额(元)" align="center">
      </el-table-column>
      <el-table-column prop="capitalDirection" label="资金方向" align="center">
        <template slot-scope="scope">
          {{ scope.row.capitalDirection | directionFilter }}
        </template>
      </el-table-column>
      <el-table-column prop="tradeType" label="交易类型" align="center">
        <template slot-scope="scope">
          {{ scope.row.tradeType | tradeFilter }}
        </template>
      </el-table-column>
      <el-table-column prop="tradeDescribe" label="交易描述" align="center">
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="tal" :hide-on-single-page="true" background :page-size="10" :page-sizes="[5,8,10]" align="center" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" style="margin-top:30px;">
    </el-pagination>

    <el-dialog title="新增充值" :visible.sync="dialogVisible" width="400px" :before-close="handleClose">
      <el-form :model="addRechargeData">
        <el-form-item label="交易金额">
          <el-input v-model="addRechargeData.amount" placeholder="请输入金额"></el-input>
        </el-form-item>
        <el-form-item label="流水账号">
          <el-input v-model="addRechargeData.tradeNo" placeholder="请输入流水号"></el-input>
        </el-form-item>
        <el-form-item label="交易时间">
           <el-date-picker v-model="addRechargeData.tradeTime" type="date" placeholder="选择日期">
           </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="recharge">新增</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs'
  export default {
    name: 'flowingWater',
    filters: {
      directionFilter(e) {
        if(e == 'in') {
          return '入账'
        } else {
          return "出账"
        }
      },
      tradeFilter(e) {
        if(e == 'company_recharge') {
          return '公司三方账户充值'
        }
        if(e == 'service_subsidy') {
          return '接口手续费回退补贴'
        }
        if(e == 'out_park_pay') {
          return '车主出场缴费'
        }
        if(e == 'service_fee') {
          return '三方接口服务费'
        }
        if(e == 'month_card_fee') {
          return '车主月卡购买'
        }
      }
    },
    data() {
      return {
        searchData: {},
        tableData: [],
        dialogVisible: false,
        addRechargeData: {},
        balance: 0,
        tal:null,
        currentPage:1,
      }
    },
    mounted() {
      this.getTableData();
    },
    methods: {
      getTableData() {
        this.$axios({
          method: 'post',
          url: 'api/cCapitalRecord/selectCapitalRecordByManage',
          data: this.searchData
        }).then((res) => {
          this.tal = res.data.pageInfo.total;
          this.tableData = res.data.pageInfo.list;
          this.balance = res.data.balance;
        })
      },
      searchTableDate() {

      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      recharge() {
        axios({
          method: 'post',
          url: '/api/cCapitalRecord/addCapitalRecord',
          data: qs.stringify(this.addRechargeData)
        }).then((res) => {
         if(res.data.status == 200) {
           this.dialogVisible = false;
           this.$message({
             message: '新增成功！',
             type: 'success'
           });
           this.getTableData();
         } else {
           this.$message({
             message: '新增失败！',
             type: 'warning'
           });
         }
        })
      },
      getDate(e) {
        this.searchData.tradeTimeStart = e[0];
        this.searchData.tradeTimeEnd = e[1]
      },
      //分页修改每页显示条数
      handleSizeChange(val){
      	this.searchData.pageSize = val;
      	this.getTableData();
      },
      //分页跳转页面
      handleCurrentChange(val){
      	this.searchData.page = val;
      	this.getTableData();
      },

    }
  }
</script>

<style scoped>
  .flowingWater {
    padding: 10px;
  }
  .searchForm .el-form-item {
    display: inline-block;
  }
  .searchForm .seech {
    width: 160px;
    margin-right: 20px;
  }
  .contentTop {
    /* border: 1px solid red; */
  }
  .balance {
    display: inline-block;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: #eee;
    font-size: 14px;
    font-weight: bold;
    padding: 8px 20px;
  }
  .money {
    color: red;
    font-size: 18px;
  }
  .btn {
    display: inline-block;
    padding: 8px 24px;
    font-size: 18px;
    /* font-weight: bold; */
    /* border: 1px solid #ccc; */
    background-color: #09CCDE;
    border-radius: 5px;
    color: #fff;
    margin-left: 20px;
  }
  .btn:hover {
    cursor: pointer;
  }
  .el-input {
    width: 200px;
  }



</style>
